<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j user-center">
    <div class="content flex-box">
      <!-- 侧栏 -->
      <div :class="['side-nav',$t('language') !== 'zh_CN'?'side-nav-en':'side-nav-zh']">
        <div class="item">
          <div class="tit">
            {{ $t('userCenter.orderManagement') }}
          </div>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='order'?'active':'']"
            @click="switchPage('order')"
          >{{ $t('userCenter.myOrders') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='collection'?'active':'']"
            @click="switchPage('collection')"
          >{{ $t('userCenter.myCollection') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='footprint'?'active':'']"
            @click="switchPage('footprint')"
          >{{ $t('history.history') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='comments'?'active':'']"
            @click="switchPage('comments')"
          >{{ $t('userCenter.evaluationList') }}</a>
        </div>
        <div class="item">
          <div class="tit">
            {{ $t('userCenter.customerService') }}
          </div>

          <!-- 联系平台客服 -->
          <a
            href="javascript:void(0)"
            class="item-a message-chat"
            target="view_window"
            @click="toChat"
          >
            {{ $t('prodDetail.contactCustomerService') }}
            <i
              v-if="message"
              class="message-radio"
            />
          </a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='return'?'active':'']"
            @click="switchPage('return')"
          >{{ $t('userCenter.refunds') }}</a>
        </div>
        <div class="item">
          <div class="tit">
            {{ $t('userCenter.assetCenter') }}
          </div>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='balance'?'active':'']"
            @click="switchPage('balance')"
          >{{ $t('userCenter.myBalance') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='integral'?'active':'']"
            @click="switchPage('integral')"
          >{{ $t('userCenter.myPoints') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a']"
            @click="switchPage('member-center')"
          >{{ $t('userCenter.memberCenter') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a']"
            @click="switchPage('coupons-center')"
          >{{ $t('userCenter.couponCenter') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='coupons'?'active':'']"
            @click="switchPage('coupons')"
          >{{ $t('userCenter.myCoupons') }}</a>
        </div>
        <div class="item">
          <div class="tit">
            {{ $t('userCenter.accountManagement') }}
          </div>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='account'?'active':'']"
            @click="switchPage('account')"
          >{{ $t('userCenter.accountInformation') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='address'?'active':'']"
            @click="switchPage('address')"
          >{{ $t('userCenter.receivingAddress') }}</a>
          <a
            href="javascript:void(0)"
            :class="['item-a',currentPage==='password'?'active':'']"
            @click="switchPage('password')"
          >{{ $t('userCenter.changePassword') }}</a>
        </div>
      </div>
      <!-- /侧栏 -->
      <router-view @user-center-info="getUserCenterInfo()" />
    </div>
  </div>
</template>

<script setup>

import { ElMessage } from 'element-plus'
import { useWebsocketStore } from '@/stores/websocket.js'

const route = useRoute()
const router = useRouter()
const websocket = useWebsocketStore()
const message = computed(() => {
  return websocket.messageValue
})

const currentPage = ref('')
watch(() => route, () => {
  if (route.path === '/user-center/uc-integral') {
    currentPage.value = 'integral'
  }
})

onMounted(() => {
  currentPage.value = route.query.currentPage || route.path.substring(route.path.lastIndexOf('-') + 1)
})
onUpdated(() => {
  currentPage.value = route.query.currentPage || route.path.substring(route.path.lastIndexOf('-') + 1)
})

/**
 * 跳转客服
 */
const toChat = () => {
  websocket.changeMessage(0)
  const routeUrl = router.resolve({
    path: '/chat',
    query: {
      shopId: 1,
      chatType: 1
    }
  })
  window.open(routeUrl.href, 'view_window')
}

let shopAuditStatus = null // 店铺状态：0 未审核 1已通过 -1未通过 null 未开店
let isSetPassword = null
let shopId = 0 // 店铺id
const switchPage = (page) => {
  if (page === 'coupons-center') {
    router.push({ path: '/coupons' })
  } else if (page === 'member-center') {
    router.push({ path: '/member-center' })
  } else if (page === 'comments') {
    router.push({ path: '/user-center/uc-comments' })
  } else if (page === 'balance') {
    router.push({ path: '/user-center/uc-balance' })
  } else if (page === 'myshop') {
    if (shopAuditStatus === 1) {
      router.push({
        path: '/shop-index',
        query: {
          sid: shopId
        }
      })
    } else {
      ElMessage({
        type: 'warning',
        message: shopAuditStatus === 0 ? $t('userCenter.storeProgress') : shopAuditStatus === -1 ? $t('userCenter.theAuditNotPass') : $t('userCenter.theStoreOffline')
      })
    }
  } else if (page === 'shopaccount') {
    router.push({ path: '/user-center/uc-shopaccount', query: { isSetPassword } })
  } else if (page === 'freeshop') {
    router.push({ path: '/user-center/uc-freeshop', query: { shopAuditStatus } })
  } else {
    router.push({ path: '/user-center/uc-' + page })
  }
  currentPage.value = page
}

const centerInfoStore = useCenterInfoStore()
// 请求个人中心信息（店铺审核状态）
watch(
  () => centerInfoStore.centerInfo,
  (val) => {
    if (!val) return
    isSetPassword = val.isSetPassword // 是否已经设置过支付密码
    shopAuditStatus = val.shopAuditStatus // 审核状态：0 未审核 1已通过 -1未通过 null 未开店
    shopId = val.shopId // 店铺id
  },
  {
    deep: true
  })
/**
 *
 */
const getUserCenterInfo = () => {
  centerInfoStore.getCenterInfo()
    .then(res => {
      isSetPassword = res.isSetPassword // 是否已经设置过支付密码
      shopAuditStatus = res.shopAuditStatus // 审核状态：0 未审核 1已通过 -1未通过 null 未开店
      shopId = res.shopId // 店铺id
    })
}

</script>

<style lang="scss" scoped>
@use "common/scss/user-center";
</style>
